<!DOCTYPE html>
<html lang="en">

<head>
    {ms:include filename=headFile.htm/} 
</head>

<body class="white">
    <div id="appCtrl" v-locak>
        <mt-header title="{ms:field.title/}">
            <a href="javascript:;" @click="history.go(-1)" slot="left">
                <mt-button icon="back"></mt-button>
            </a>
        </mt-header>
        
        
        <div class="product-banner">
            <img src="{ms:field.litpic/}" alt="">
        </div>

        <div class="prodcut-title">
          {ms:field.title/}
        </div>

        <div class="product-info">
            <div class="choose-attrs">
                <dl class="clearfix">
                    <dt>保　　额：</dt>
                    <dd>
                        <a 
                        href="javascript:;" 
                        v-for="(el,index) in product"
                        :key="index"
                        @click="amountIndex=index" 
                        :class="{on:amountIndex === index}">
                            {{el.amount/10000}} 万
                        </a>
                    </dd>
                </dl>
                <dl class="clearfix">
                    <dt>保障期限：</dt>
                    <dd>一年</dd>
                </dl>
                <dl class="clearfix">
                    <dt>年　　龄：</dt>
                    <dd>
                        <a 
                        v-for="(el,index) in product[amountIndex].age"
                        :key="index"
                        @click="ageIndex=index"
                        href="javascript:;"
                        :class="{on:ageIndex === index}">
                        {{el.scope}}</a>
                    </dd>
                </dl>
            </div>
        </div>

        <mt-tab class="product-tab" v-model="typeId" @click="linkTo">
            <mt-tab-item :id="1001">产品详情</mt-tab-item>
            <mt-tab-item :id="1002">购买须知</mt-tab-item>
            <mt-tab-item :id="1003">常见问题</mt-tab-item>
        </mt-tab>




        <div class="product-article">
            <div class="content">
                 {ms:field.content/}
            </div>
          
        </div>


            <img src="{ms:globalskin.url/}/images/product_detail/d_1.jpg" width="100%" alt="">

           
        

        <div class="process-list">
                
            </div>

            <div>
                <img src="{ms:globalskin.url/}/images/product_detail/d_3.jpg" width="100%" alt="">
            </div>

          
        
    

    <div class="fixed-buy">
        <a href="" class="service"></a>
        <p>价格：￥{{product[amountIndex].age[ageIndex].price}}</p>
        <div class="submit">立即购买</div>
    </div>
    </div>
   
    <script>
        var vmodel = new Vue({
            el: '#appCtrl',
            data: function(){
                return {
                    typeId:1001,
                    amountIndex:0,
                    ageIndex:0,
                    product:[{
                        id:1000001,
                        amount:20000,
                        age:[{
                            scope: '45-49',
                            price: 400
                        },{
                            scope: '50-54',
                            price: 500
                        },{
                            scope: '55-59',
                            price: 600
                        }]
                    },{
                        id:1000002,
                        amount:10000,
                        age:[{
                            scope: '45-49',
                            price: 301
                        },{
                            scope: '50-54',
                            price: 401
                        },{
                            scope: '55-59',
                            price: 501
                        },{
                            scope: '60-64',
                            price: 601
                        }]
                    }]
                }
            },

            watch:{
                amountIndex: function(val){
                    var size = this.product[val].age.length-1;
                    if(this.ageIndex>size){
                        this.ageIndex = size;
                    }
                }
            },

            methods:{
                submit: function(){
                    var amount = vmodel.product[vmodel.amountIndex].amount;

                    var scope = vmodel.product[vmodel.amountIndex].age[vmodel.ageIndex].scope;

                    var id = vmodel.product[vmodel.amountIndex].id;

                    var price = vmodel.product[vmodel.amountIndex].age[vmodel.ageIndex].price;

                    location.href = 'http://www.baidu.com?amount='+ amount +'&scope='+scope+'&price='+price+'&id='+id;
                },

                linkTo: function(){

                }
            },
            mounted: function(){
                var img = document.querySelectorAll('img');
                img.forEach(function(el, index){
                   el.style.width = el.width = '100%';
                   el.style.height = el.height = 'auto';
                })
           }
      
        })

    </script>
</body>

</html>